<!-- 选择银行卡信息 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="u-page">
      <view class="color-list">
        <view
          class="color-item"
          v-for="(item, index) in list"
          :key="item.value"
        >
          <liu-swipe-action
            ref="liuSwipeAction"
            :index="index"
            @clickItem="liuClickItem"
            :btnList="btnList"
          >
            <view class="flex flex-jsb">
              <view class="title">
                {{ item.amountItemName }}
              </view>
              <view class="title">
                {{ item.amountPaid }}
              </view>
            </view>
          </liu-swipe-action>
        </view>
      </view>
    </view>
    <!-- 添加结款方式 -->
    <u-popup
      :show="show"
      :round="10"
      mode="center"
      :closeOnClickOverlay="false"
    >
      <view class="popup-view">
        <view class="title"> 其他费用 </view>
        <view class="form-view m-b-40">
          <view
            class="form-item"
            @click="
              go('/pages/application/pages/finance/components/other-expenses', {
                listOptionsOnCurrentShop: true,
              })
            "
          >
            费用名称:<u--input
              @focus="
                go(
                  '/pages/application/pages/finance/components/other-expenses',
                  { listOptionsOnCurrentShop: true }
                )
              "
              border="surround"
              v-model="label.amountItemName"
            ></u--input>
          </view>
          <view class="form-item">
            费用金额:<u--input
              border="surround"
              type="number"
              v-model="label.amountPaid"
            ></u--input>
          </view>
          <view class="form-item flex">
            备注: <u--input class="m-l-50" border="surround" v-model="label.remarks"></u--input>
          </view>
        </view>
        <view class="bot-view flex flex-sa">
          <view class="btn" @click="onCencal"> 取消 </view>
          <view class="btn" @click="onSave"> 保存 </view>
        </view>
      </view>
    </u-popup>
    <view class="fixed-btn">
      <u-button
        text="保存"
        @click="save()"
        type="primary"
        shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
      ></u-button>
    </view>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      search: null,
      indexList: [],
      btnList: [
        {
          id: "2",
          name: "删除",
          width: "100rpx",
          bgColor: "#ed656d",
          color: "#FFFFFF",
          fontSize: "28rpx",
        },
      ],
      config: {
        title: "其他费用",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      // 颜色列表
      list: [],
      params: {
        data: {},
        page: {
          current: 1,
          size: 10,
        },
      },
      // 显示模态框
      show: false,
      label: {
        amountItemName: "", // 账户
        amountPaid: "", // 金额
        amountItemId: "", //账户id
      },
    };
  },
  computed: {},
  onLoad(opt) {
    if (opt.data) {
      this.list = opt.data;
    }
  },
  methods: {
    liuClickItem(item) {
      this.$refs.liuSwipeAction[item.index].reset();
      this.list.splice(item.index, 1);
    },
    save() {
      uni.$emit("on-receipt-other-expenses", this.list);
      uni.navigateBack();
    },
    // 页面跳转
    go(item, query = {}) {
      this.$Router.push({
        path: item,
        query: query,
      });
    },
    scrolltolower() {},
    clickBtn(item) {
      if (item.key === "btn1") {
        this.show = true;
      }
    },
    onCencal() {
      this.label = {
        amountItemName: "", // 账户
        amountPaid: "", // 金额
        amountItemId: "", //账户id
      };
      this.show = false;
    },
    onSave() {
      this.list.push(this.label);
      this.label = {
        amountItemName: "", // 账户
        amountPaid: "", // 金额
        amountItemId: "", //账户id
      };
      this.show = false;
    },
  },
  mounted() {
    uni.$on("otherExpenses", (data) => {
      this.label.amountItemName = data.name;
      this.label.amountItemId = data.id;
    });
  },
  beforeDestroy() {
    uni.$off("otherExpenses");
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.color-list {
  background-color: #fff;

  .color-item {
    // height: 80rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
    line-height: 80rpx;
  }
}
</style>
